<template>
    <div class="top_list_wrapper">
        <div class="page-header">
            <p>榜单</p>
            <i class="iconfont icon-bangdan"></i>
            <router-link to="/discover/toplist">更多</router-link>
        </div>
        <dl>
            <dt>
                <router-link to="/"><img :src="soaring_list.coverImgUrl"/></router-link>
                <div class="title_wrapper">
                    <h3>
                        <router-link to="/">{{soaring_list.name}}</router-link>
                    </h3>
                    <div>
                        <router-link to="/"><i class="glyphicon glyphicon-play-circle"></i></router-link>
                    </div>
                </div>
            </dt>
            <dt v-for="(item,index) in sL" :key="index">
                <span :class="{top_three:index<3}">{{index+1}}</span>
                <span><router-link to="/">{{item.name}}</router-link></span>
                <div class="tools">
                    <i title="播放" class="iconfont icon-play" @click="play(item.id,item.name)"></i>
                    <i title="添加到播放列表" class="iconfont icon-tianjia" @click="add(item.id,item.name)"></i>
                    <i></i>
                </div>
            </dt>
            <dt>
                <router-link to="/">查看全部></router-link>
            </dt>
        </dl>
        <dl>
            <dt>
                <router-link to="/"><img :src="new_list.coverImgUrl"/></router-link>
                <div class="title_wrapper">
                    <h3>
                        <router-link to="/">{{new_list.name}}</router-link>
                    </h3>
                    <div>
                        <router-link to="/"><i class="glyphicon glyphicon-play-circle"></i></router-link>
                    </div>
                </div>
            </dt>
            <dt v-for="(item,index) in nL" :key="index">
                <span :class="{top_three:index<3}">{{index+1}}</span>
                <span><router-link to="/">{{item.name}}</router-link></span>
                <div class="tools">
                    <i title="播放" class="iconfont icon-play" @click="play(item.id,item.name)"></i>
                    <i title="添加到播放列表" class="iconfont icon-tianjia" @click="add(item.id,item.name)"></i>
                    <i></i>
                </div>
            </dt>
            <dt>
                <router-link to="/">查看全部></router-link>
            </dt>
        </dl>
        <dl>
            <dt>
                <router-link to="/"><img :src="original_list.coverImgUrl"/></router-link>
                <div class="title_wrapper">
                    <h3>
                        <router-link to="/">{{original_list.name}}</router-link>
                    </h3>
                    <div>
                        <router-link to="/"><i class="glyphicon glyphicon-play-circle"></i></router-link>
                    </div>
                </div>
            </dt>
            <dt v-for="(item,index) in oL" :key="index">
                <span :class="{top_three:index<3}">{{index+1}}</span>
                <span><router-link to="/">{{item.name}}</router-link></span>
                <div class="tools">
                    <i title="播放" class="iconfont icon-play" @click="play(item.id,item.name)"></i>
                    <i title="添加到播放列表" class="iconfont icon-tianjia" @click="add(item.id,item.name)"></i>
                    <i></i>
                </div>
            </dt>
            <dt>
                <router-link to="/">查看全部></router-link>
            </dt>
        </dl>
    </div>
</template>

<script>
    // "0": 云音乐新歌榜,/////////
    //     "1": 云音乐热歌榜,
    //     "2": 网易原创歌曲榜,/////////
    //     "3": 云音乐飙升榜,//////////
    //     "4": 云音乐电音榜,
    //     "5": UK排行榜周榜,
    //     "6": 美国Billboard周榜
    // "7": KTV嗨榜,
    //     "8": iTunes榜,
    //     "9": Hit FM Top榜,
    //     "10": 日本Oricon周榜
    // "11": 韩国Melon排行榜周榜,
    //     "12": 韩国Mnet排行榜周榜,
    //     "13": 韩国Melon原声周榜,
    //     "14": 中国TOP排行榜(港台榜),
    //     "15": 中国TOP排行榜(内地榜)
    // "16": 香港电台中文歌曲龙虎榜,
    //     "17": 华语金曲榜,
    //     "18": 中国嘻哈榜,
    //     "19": 法国 NRJ EuroHot 30周榜,
    //     "20": 台湾Hito排行榜,
    //     "21": Beatport全球电子舞曲榜,
    //     "22": 云音乐ACG音乐榜,
    //     "23": 云音乐嘻哈榜
    import musicApi from "../request/musicApi";
    import axios from 'axios'

    export default {
        name: "top_list",
        data() {
            return {
                soaring_list: '',
                new_list: '',
                original_list: '',
                sL: [],
                nL: [],
                oL: []
            }
        },
        methods: {
            updatePlayer(url) {
                let player = document.getElementById('audioPlayer');
                player.src = url;
                player.play();
                player.muted = false;
            },
            play(id, name) {
                //由于系统限制，ios等不能在回调函数中使用play(),需要首先设置为静音，play（）再打开音量
                document.getElementById('audioPlayer').muted = true;
                let store = this.$store;


                //获取url和detail(可以传多个id，取数组第一个值)
                axios.all([musicApi.getMusicUrl({id}), musicApi.getMusicDetail({ids: id})])
                    .then(axios.spread((url, detail) => {
                        if (url.data.code == 200 && detail.data.code == 200) {
                            if (!url.data.data[0].url) {
                                this.$alert('版权问题，暂时无法播放，请到官网购买', '提示', {
                                    confirmButtonText: '确定'
                                });
                                document.getElementById('audioPlayer').muted = false;
                                return;
                            }
                            store.commit('setCurrentSongId', id);
                            store.commit('setCurrentMusicName', name);
                            store.commit('setPlayStatus', true);
                            store.commit('setCurrentPlayTime', 0);
                            // console.log(url,detail);
                            store.commit('setCurrentMusicUrl', url.data.data[0].url);
                            store.commit('setCurrentMusicDetail', detail.data.songs[0]);
                            store.commit('setCurrentMusicMv', detail.data.songs[0].mv);
                            store.commit('setCurrentMusicCoverUrl', detail.data.songs[0].al.picUrl);
                            store.commit('setCurrentMusicArtist', detail.data.songs[0].ar[0].name);
                            this.updatePlayer(url.data.data[0].url);
                            for (let i = 0; i < this.$store.state.playList.length; i++) {
                                if (id == this.$store.state.playList[i].id) return;
                            }
                            store.commit('addMusicToPlayList', {
                                id,
                                name,
                                artist: detail.data.songs[0].ar[0].name,
                                picUrl: detail.data.songs[0].al.picUrl,
                                mv: detail.data.songs[0].mv,
                                duration: detail.data.songs[0].dt
                            });
                        }
                    }));
            }, add(id, name) {
                let store = this.$store;
                for (let i = 0; i < this.$store.state.playList.length; i++) {
                    if (id == this.$store.state.playList[i].id) {
                        this.$message({
                            showClose: true,
                            center: true,
                            message: '已添加到播放列表',
                            type: 'success'
                        });
                        return;
                    }
                }
                //获取url和detail(可以传多个id，取数组第一个值)
                axios.all([musicApi.getMusicUrl({id}), musicApi.getMusicDetail({ids: id})])
                    .then(axios.spread((url, detail) => {
                        if (url.data.code == 200 && detail.data.code == 200) {
                            if (!url.data.data[0].url) {
                                this.$alert('版权问题，暂时无法播放，请到官网购买', '提示', {
                                    confirmButtonText: '确定'
                                });
                                return;
                            }
                            store.commit('addMusicToPlayList', {
                                id,
                                name,
                                artist: detail.data.songs[0].ar[0].name,
                                picUrl: detail.data.songs[0].al.picUrl,
                                mv: detail.data.songs[0].mv,
                                duration: detail.data.songs[0].dt
                            });

                            this.$message({
                                center: true,
                                showClose: true,
                                message: '已添加到播放列表',
                                type: 'success'
                            });
                        }
                    }));
            }
        },
        mounted() {
            axios.all([musicApi.getATopList({idx: 3}), musicApi.getATopList({idx: 0}), musicApi.getATopList({idx: 2})])
                .then(axios.spread((soar, newlist, original) => {
                    // console.log(soar);
                    if (soar.data.code === 200) {
                        this.soaring_list = soar.data.playlist;
                    }
                    if (newlist.data.code === 200) {
                        this.new_list = newlist.data.playlist;
                    }
                    if (original.data.code === 200) {
                        this.original_list = original.data.playlist;
                    }
                    for (let i = 0; i < 10; i++) {
                        this.sL.push(this.soaring_list.tracks[i]);
                        this.nL.push(this.new_list.tracks[i]);
                        this.oL.push(this.original_list.tracks[i]);
                    }
                }));
        },
    }
</script>

<style scoped lang="scss">
    @import "../assets/css/tables.css";

    .top_three {
        color: #C93C3B;
    }

    .top_list_wrapper {
        dl {
            dt:not(:nth-child(1)) {
                span {
                    a {
                        display: block;
                        width: 100%;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                }
            }
        }
    }

    .top_list_wrapper {
        min-width: 768px;

        dl {
            border: 1px solid #D3D3D3;
            margin-bottom: 0px;
            float: left;
            width: 33.3333%;

            dt {
                position: relative;

                &:first-child {
                    height: 120px;
                    padding: 20px 0 0 19px;

                    img {
                        height: 80px;
                        width: 80px;
                    }

                    div.title_wrapper {
                        margin-left: 6px;
                        margin-top: 10px;
                        vertical-align: top;
                        display: inline-block;

                        i {
                            font-size: 20px;
                            color: #BFBFBF;

                            &:hover {
                                color: #333;
                            }
                        }

                        h3 {
                            margin: 0px;
                            margin-bottom: 5px;

                            a {
                                text-decoration: none;
                                color: #000;
                            }
                        }
                    }
                }

                &:not(:first-child) {
                    cursor: pointer;
                    padding-left: 18px;
                    height: 32px;

                    &:hover {
                        .tools {
                            display: block
                        }

                        span:nth-child(2) {
                            width: 60%;
                        }
                    }

                    .tools {
                        position: absolute;
                        z-index: 50;
                        display: none;
                        right: 10px;
                        line-height: 32px;
                        width: 20%;

                        i {
                            &:hover {
                                color: #656565;
                            }

                            color: #7A7979;
                            font-size: 16px;
                            display: inline-block;
                            margin-right: 10px;
                        }
                    }

                    span {
                        display: inline-block;
                        float: left;
                        line-height: 32px;
                        height: 100%;
                        text-align: center;
                    }

                    span:nth-child(1) {
                        font-size: 20px;
                        width: 32px;
                    }

                    span:nth-child(2) {
                        width: 80%;
                        text-align: left;

                        a {
                            text-decoration: none;
                            color: #000;
                        }
                    }
                }

                &:not(:last-child) {
                    border-bottom: 0.5px solid #D3D3D3;
                }

                &:last-child {
                    a {
                        display: block;
                        color: #000;
                        text-align: right;
                        line-height: 32px;
                    }
                }

                &:nth-of-type(odd) {
                    background: #F4F4F4;

                }

                &:nth-of-type(even) {
                    background: #E8E8E8;
                }
            }
        }
    }
</style>